<template>
  <div class="serviceList">
    <div class="itemList" v-for="item in items">
      <div class="service-logo"><img :src="alias.logo ? item[alias.logo] : item.logo"></div>
      <div class="service-content">
        <div class="service-title">{{ alias.title ? item[alias.title]: item.title}}</div>
        <div class="service-text">{{alias.text ? item[alias.text] : item.text }}</div>
        <div class="service-button pull-right" :data-id="item.id" @click="listClick">READ MORE</div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .serviceList {
    width: 1160px;
    margin: 0 auto;
    .itemList {
      background: #f7f6f6;
      padding: 40px;
      margin-bottom: 40px;
      .service-logo {
        width: 257.5px;
        display: inline-block;
        vertical-align: top;
        img {
          width: 100%;
        }
      }
      .service-content {
        display: inline-block;
        width: 770px;
        vertical-align: middle;
        margin-left: 30px;
        .service-title {
          font-size: 16px;
          font-weight: 600;
          line-height: 30px;
          border-bottom: 2px solid black;
        }
        .service-text {
          padding: 30px 0;
          overflow: hidden;
        }
        .service-button {
          background: #267cc1;
          padding: 8px 10px;
          ;
          display: inline;
          color: white;
          font-weight: 600;
          cursor: pointer;
        }
      }
    }
  }

  @media screen and (max-width: 900px) {
    .serviceList {
      width: 100%;
      .itemList {
        padding: 0;
        margin: 0;
        .service-logo {
          width: 100%;
        }
        .service-content {
          margin: 0;
          padding-top: 20px;
          width: 100%;
          padding: 20px 10px 20px 10px;
        }
      }
    }
  }

</style>
<script>
  /**
   * 用于服务列表的列表处理 这里只需要给数组就行
   */
  import $ from 'jQuery'
  import router from '../router'
  export default {
    name: 'ServiceList',
    props: {
      items: {
        type: Array,
        default: function () {
          return []
        }
      },
      alias: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    methods: {
      listClick: function (e) {
        var id = $(e.target).attr('data-id')
        router.push({
          path: 'project',
          query: {
            id: id
          }
        })
      }
    }
  }

</script>
